<template>
  <div id="cars">
    <div class="search_box">
      <el-input placeholder="付款方" v-model="searchContent.pay"></el-input>
      <el-input
        placeholder="收款方"
        v-model="searchContent.collection"
      ></el-input>
      <el-select v-model="searchContent.settlement">
        <el-option value="1" label="已结清"></el-option>
        <el-option value="2" label="未结清"></el-option>
      </el-select>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-model="searchContent.time"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="printData">打印</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="650"
      border-bottom
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="lessee" label="付款公司" align="center">
      </el-table-column>
      <el-table-column prop="project_name" label="所属项目" align="center">
      </el-table-column>
      <el-table-column prop="lessor" label="收款公司" align="center">
      </el-table-column>
      <el-table-column prop="plate" label="车牌" align="center">
      </el-table-column>
      <!-- <el-table-column prop="plate" label="收账说明" align="center">
        <template slot-scope="scope">
          <span> {{ `${scope.row.plate} 出车` }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="receivable" label="应收金额" align="center">
      </el-table-column>
      <el-table-column prop="paid_in" label="已收金额" align="center">
      </el-table-column>
      <el-table-column prop="poor_harvest" label="欠收金额" align="center">
        <template slot-scope="scope">
          <span
            :style="{
              color: Number(scope.row.poor_harvest) > 0 ? 'red' : 'green',
            }"
          >
            {{ scope.row.poor_harvest > 0 ? scope.row.poor_harvest : "" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="日期"
        align="center"
        width="160"
      >
      </el-table-column>
    </el-table>
    <div class="page_table">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB } from "@/db/indexdb";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      tableData: [],
      searchContent: {
        pay: "",
        collection: "",
        time: [],
        settlement: "",
      },
      pag: {
        total: 0,
        page: 1,
        size: 10,
      },
      printDataList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.printDataList = val;
    },
    printData() {
      let header = [
        { value: "create_time", label: "日期" },
        { value: "lessee", label: "付款方" },
        { value: "project_name", label: "所属项目" },
        { value: "lessor", label: "收款方" },
        { value: "plate", label: "车牌" },
        { value: "receivable", label: "应收金额" },
        { value: "paid_in", label: "已收金额" },
        { value: "poor_harvest", label: "欠收金额" },
        { value: "remark", label: "说明" },
      ];
      let msg = {
        msg1: "销售流水账",
      };
      printData(msg, this.printDataList, header);
    },
    reset() {
      this.searchContent = {
        pay: "",
        collection: "",
        time: [],
        settlement: "",
      };
      this.getList();
    },
    getList() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "项目表").then((res1) => {
          getDataByKey("list", "出车记录表").then((res) => {
            let start = (this.pag.page - 1) * this.pag.size;
            let end = start + this.pag.size;
            // 出车记录表
            res.data.map((v) => {
              res1.data.map((v1) => {
                if (v1.id == v.project_id) {
                  v.lessee = v1.lessee;
                  v.lessor = v1.lessor;
                  v.project_name = v1.project_name;
                }
              });
            });
            res?.data.sort((b, a) => {
              return Number(a.id) - Number(b.id);
            });
            let data = [...res.data];
            if (this.searchContent.pay != "") {
              data = data.filter((v) => {
                if (v.lessee) {
                  return v.lessee.includes(this.searchContent.pay);
                }
              });
            }
            if (this.searchContent.collection != "") {
              data = data.filter((v) => {
                if (v.lessor) {
                  return v.lessor.includes(this.searchContent.collection);
                }
              });
            }
            if (this.searchContent.settlement != "") {
              data = data.filter((v) => {
                if (this.searchContent.settlement == 1) {
                  return Number(v.poor_harvest || 0) <= 0;
                } else {
                  Number(v.poor_harvest || 0) > 0;
                }
              });
            }
            if (this.searchContent.time.length != 0) {
              let startDate = new Date(this.searchContent.time[0]);
              let endDate = new Date(this.searchContent.time[1]);
              data = data.filter((v) => {
                let startDate1 = new Date(v.start_time);
                let startDate2 = new Date(v.end_time);
                return startDate1 >= startDate && startDate2 <= endDate;
              });
            }
            this.pag.total = data.length;
            this.tableData = data.slice(start, end);
          });
        });
      });
    },
    handleSizeChange(val) {
      this.pag.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pag.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
